<template>
    <view :class="itemClass" @click="goTo(param.pathUrl)">
        <image v-if="showFrontIcon" class="components-category-item-icon" :src="param.frontIcon"></image>
        <text :class="labelClass">{{param.label}}</text>
        <view v-if="showInfoTip" class="components-category-item-info-tip-view">
            <text class="components-category-item-info-tip">{{param.infoTip}}</text>
        </view>
        <switch v-if="showSwitch" :checked="switchChecked" class="components-category-item-switch-class" color="#077131" @change="switchChange" ></switch>
        <image v-if="showBehindIcon" class="components-category-item-icon" style="float: right" :src="param.behindIcon"></image>
    </view>
</template>
<script>
    export default {
        props: {
            param: {
                type: Object,
                default: {
                    itemClass: [], // 样式
                    frontIcon: '', // 文字前的图标
                    label: '', // 标签显示的文字
                    labelClass: [], // 标签显示的文字样式
                    behindIcon: '', // 文字后面显示的图标
                    pathUrl: '' // 点击后跳转的路径
                }
            }
        },
        data() {
            return {

            };
        },
        computed: {
            // 判断是否显示标签前面的图标
            showFrontIcon() {
                return this.param.frontIcon && this.param.frontIcon !== '';
            },
            // 判断是否显示文字后的图标
            showBehindIcon() {
                return this.param.behindIcon && this.param.behindIcon !== '';
            },
            // 判断是否显示提示信息
            showInfoTip() {
                return this.param.infoTip && this.param.infoTip !== '';
            },
            // 显示的样式
            itemClass() {
                return this.param.itemClass && this.param.itemClass.length > 0 ? this.param.itemClass : ['components-category-item'];
            },
            labelClass() {
                return this.param.labelClass && this.param.labelClass.length > 0 ? this.param.labelClass : ['components-category-item-label'];
            },
            // 选择框是否选中
            switchChecked() {
                return this.param.switchChecked;
            },
            // 判断是否显示switch
            showSwitch() {
                return this.param.showSwitch;
            }
        },
        methods: {
            /**
             * 跳转页面
             * @param url 跳转页面路径
             */
            goTo(url) {
                if (!url) {
                    return;
                }
                uni.navigateTo({
                    url: url
                });
            },
            /**
             * switch组件切换回调函数
             * @param e
             */
            switchChange: function (e) {
                if (typeof this.param.change === 'function') {
                    this.param.change(e);
                }
            }
        }
    };
</script>
<style>
    .components-category-item {
        display: flex;
        height: 88upx;
        line-height: 88upx;
        vertical-align: middle;
        padding: 0 24upx;
        font-size: 28upx;
        color: #1a1a1a;
        background-color: #ffffff;
        border-bottom: 1px #e5e5e5 solid;
        align-items: center;
        justify-content: space-between;

    }

    .components-category-item .first-item {
        border-top: 1px #e5e5e5 solid;
    }

    .components-category-item-icon {
        width: 36upx;
        height: 36upx;
    }

    .components-category-item-label {
        width: 100%;
        padding-left: 20upx;
        text-align: left;
    }
    .components-category-item-info-tip-view {
        width: 100%;
    }
    .components-category-item-info-tip {
        width: 100upx;
        height: 32upx;
        line-height: 32upx;
        margin-left: 20upx;
        text-align: center;
        padding: 0 8upx;
        border-radius: 16upx;
        border: 2upx #f5b431 solid;
        color: #f5b431;
        font-weight: bold;
        font-size: 20upx;
    }
    .components-category-item-switch-class {
        width: 80upx;
        height: 40upx;
        line-height: 40upx;
        margin-left: 20upx;
        margin-bottom: 20upx;
        text-align: center;
        border-radius: 20upx;
        transform: scale(0.7, 0.7);
    }
</style>